<template>
	<view class="container">
   <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
     <text>头像：</text>
     <image class="avatar-img" :src="userinfo.avatarUrl"></image>
   </button> 
   <view class="nickname">
     <text>昵称：</text>
     <input type="nickname" @change='getNickName' class="weui-input" placeholder="请输入昵称"/>
   </view>
   
     <view class="bottom-view">
         <button type="primary" class="bottom-btn" @click="getToMy">保存</button>
     </view>
	</view>
</template>

<script>
  import {mapMutations,mapState} from 'vuex'
	export default {
		data() {
			return {
				
			};
		},
    methods:{
      ...mapMutations('m_user',['updateUserInfoAvatarUrl','updateUserInfoSickname']),
      getToMy(){
        uni.switchTab({
          url:'/pages/my/my'
        })
      },
      getNickName(e){
        console.log(e.detail.value)
        this.updateUserInfoSickname(e.detail.value)
      },
      onChooseAvatar(e){
        console.log(e.detail.avatarUrl)
        this.updateUserInfoAvatarUrl(e.detail.avatarUrl)
      }
    },
      
    computed:{
      ...mapState('m_user',['userinfo'])
    },
	}
</script>

<style lang="scss">
  .avatar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10rpx;
    .avatar-img {
      width: 100px;
      height: 100px;
    }
  }
  .nickname {
    height: 100px;
    display: flex;
    align-items: center;
    border: 1px solid #efefef;
    font-size: 18px;
    padding: 0 13px;
  }
  .bottom-view{
    // position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    button{
      margin: 0 auto;
    }
  }
</style>
